<template>
  <div v-loading="loading">
    <!-- 下拉框 -->
    <div>
      <el-select v-model="value1" placeholder="请选择" class="select-box" @change="changeValue">
        <el-option
          v-for="item in kindOptions"
          :key="item.index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="value2" placeholder="请选择" class="select-box" @change="changeValue">
        <el-option
          v-for="item in yearOptions"
          :key="item.year"
          :label="item.year"
          :value="item.year"
        ></el-option>
      </el-select>
      <el-button class="addFirstButton" type="text" @click="addFirstDialogVisible = true">
        <el-button type="primary">添加</el-button>
      </el-button>

    </div>

    <!-- 表格 -->
    <div class="quo-table">
      <!-- 表格——涉及到一个el-table的嵌套 -->
      <el-table :data="tableData" style="width: 100%" @row-click="openDetails" max-height="400px">
        <el-table-column type="expand">
          <template slot-scope="props" @row-click="openDetails">
            <el-table :data="props.row.sonIndex" style="width: 100%" @row-click="openDetails">
              <el-table-column type="expand">
                <template slot-scope="propp">
                  <div
                    v-for="(itemm,index) in propp.row.sonIndex"
                    :key="index"
                    @click="openDetails(itemm)"
                  >
                    <!-- 最内层 -->
                    <el-form label-position="left" inline class="demo-table-expand">
                      <el-form-item label="名字:">
                        <span>{{ itemm.name }}</span>
                      </el-form-item>
                      <el-form-item label="权重:">
                        <span>{{ itemm.weight }}</span>
                      </el-form-item>
                      <el-form-item label="责任单位:">
                        <span>{{ itemm.responsible }}</span>
                      </el-form-item>
                      <el-form-item label="单位:">
                        <span>{{ itemm.unit }}</span>
                      </el-form-item>
                      <el-form-item label="留言：">
                        <span>{{ itemm.weight }}</span>
                      </el-form-item>
                      <el-form-item id="small-icon">
                        <li v-for="(fatherIcon,index) in allIcons" :key="index" class="icon-wrap">
                          <el-button type="text" @click="dialogVisi(index)">
                            <img :src="fatherIcon.src" />
                          </el-button>
                        </li>
                      </el-form-item>
                    </el-form>
                  </div>
                </template>
              </el-table-column>
              <!-- 第二层 -->
              <el-table-column label="名称" prop="name"></el-table-column>
              <el-table-column label="权重" prop="weight"></el-table-column>
              <el-table-column label="操作">
                <li v-for="(fatherIcon,index) in allIcons" :key="index" class="icon-wrap">
                  <el-button type="text" @click="dialogVisi(index)">
                    <img :src="fatherIcon.src" />
                  </el-button>
                </li>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <!-- 最外层的表格 -->
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="权重" prop="weight"></el-table-column>
        <el-table-column label="操作">
          <li v-for="(fatherIcon,index) in allIcons" :key="index" class="icon-wrap">
            <el-button type="text" @click="dialogVisi(index)">
              <img :src="fatherIcon.src" />
            </el-button>
          </li>
        </el-table-column>
      </el-table>
    </div>

    <!-- 所有弹窗 -->
    <div>
      <!-- 修改名称弹框 -->
      <el-dialog
        title="修改"
        :visible.sync="updateDialogVisible"
        width="30%"
        class="edit-form"
        center
      >
        <span>名称:</span>
        <el-input
          v-model="updateName"
          placeholder="请输入内容"
          style="width:80%;padding:20px 0 0 35px; "
        ></el-input>
        <br />
        <span>权重:</span>
        <el-input
          v-model="updateWeight"
          placeholder="请输入内容"
          style="width:80%;padding:15px 0 0 35px; "
        ></el-input>
        <br />
        <span>责任单位:</span>
        <el-select
          v-model="updateResponse"
          placeholder="请选择"
          style="width:73%;padding:15px 0 0 6px"
        >
          <el-option
            v-for="item in allDepart"
            :key="item.index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <br />
        <span>单位:</span>
        <el-input
          v-model="updateUnit"
          placeholder="请输入内容"
          style="width:80%;padding:15px 0 0 35px; "
        ></el-input>
        <br />
        <span style="vertical-align:30px;">留言:</span>
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          v-model="updateRemark"
          style="width:80%;padding:15px 0 0 35px; "
        ></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateIndex(returnRow)">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 删除 -->
      <el-dialog title="删除" :visible.sync="deleteDialogVisible" width="30%" center>
        <span>您确认要删除数据吗</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="delData">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 右边小图标的增加 -->
      <el-dialog title="添加" :visible.sync="resetDialogVisible" width="30%" center>
        <span>名称:</span>
        <el-input v-model="addName" placeholder="请输入内容" style="width:80%;padding:20px 0 0 35px; "></el-input>
        <br />
        <span>权重:</span>
        <el-input v-model="addWeight" placeholder="请输入内容" style="width:80%;padding:15px 0 0 35px; "></el-input>
        <br />
        <span>责任单位:</span>
        <el-select v-model="addresponse" placeholder="请选择" style="width:73%;padding:15px 0 0 6px">
          <el-option
            v-for="item in allDepart"
            :key="item.index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <br />
        <span>单位:</span>
        <el-input v-model="addUnit" placeholder="请输入内容" style="width:80%;padding:15px 0 0 35px; "></el-input>
        <br />
        <span style="vertical-align:30px;">留言:</span>
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          v-model="addRemark"
          style="width:80%;padding:15px 0 0 35px; "
        ></el-input>
        <!-- <input type="text" size="20" οnkeydοwn="if(event.keyCode == 13) alert(/^-?/d+(/./d{1,3})?$/.test(this.value));" /> -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetDialogVisible = false,deleteInput()">取 消</el-button>
          <el-button type="primary" @click="addQuota(returnRow)">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 最上边按钮的添加 -->
      <!-- 还未修改绑定值 -->
       <el-dialog title="添加" :visible.sync="addFirstDialogVisible" width="30%" center>
        <span style="vertical-align:10px;">父级指标:</span>
          <treeselect
            :multiple="false"
            :options="quotaOptions"
            placeholder="选择父级指标 (空为一级指标)"
            v-model="quotaName"
            style="width:71%;margin-left:6px;display:inline-block;"
            />
          <br />
        <span>名称:</span>
        <el-input v-model="firstName" placeholder="请输入内容" style="width:80%;padding:15px 0 0 35px; "></el-input>
        <br />
        <span>权重:</span>
        <el-input v-model="firstWeight" placeholder="请输入内容" style="width:80%;padding:15px 0 0 35px; "></el-input>
        <br />
        <span>责任单位:</span>
        <el-select v-model="firstResponse" placeholder="请选择" style="width:73%;padding:15px 0 0 6px;">
          <el-option
            v-for="item in allDepart"
            :key="item.index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <br />
        <span>单位:</span>
        <el-input v-model="firstUnit" placeholder="请输入内容" style="width:80%;padding:15px 0 0 35px; "></el-input>
        <br />
        <span style="vertical-align:30px;">留言:</span>
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          v-model="firstMark"
          style="width:80%;padding:15px 0 0 35px; "
        ></el-input>
        <!-- <input type="text" size="20" οnkeydοwn="if(event.keyCode == 13) alert(/^-?/d+(/./d{1,3})?$/.test(this.value));" /> -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addFirstDialogVisible = false,deleteInputNew()">取 消</el-button>
          <el-button type="primary" @click="addQuotaNew()" :disabled = "isSure">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
//字符串格式
import { type } from "os";
import qs from "qs";
//treeselect
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';

import quotaHomeVue from './quotaHome.vue';
export default {
  components: { Treeselect },
  name: "quotaHome",
  data() {
    return {
      loading: true,

      returnRow: "",
      deleteDialogVisible: false,
      updateDialogVisible: false,
      resetDialogVisible: false,
      addFirstDialogVisible:false,
      isSure:false,
      value1: 0,
      value2: 2019+"",

      //增加数据所需要的字段
      addName: "",
      addWeight: "",
      addresponse: "",
      addUnit: "",
      addRemark: "",

      //最上边增加所需要的字段
      firstName: "",
      firstWeight: "",
      firstResponse: "",
      firstUnit: "",
      firstMark: "",

      //修改数据所需要的字段
      updateName: "",
      updateWeight: "",
      updateResponse: "",
      updateUnit: "",
      updateRemark: "",

      updateRespoId:"",

      //删除的时候的id
      deleteId: "",

      newResponse:"",

      // type:0,
      tableData: [],
      allDepart: [],

      // 下拉框的数据
      kindOptions: [
        {
          index: 0,
          value: 0,
          label: "投入"
        },
        {
          index: 1,
          value: 1,
          label: "产出"
        }
      ],
      yearOptions: [
      ],

      // 操作的图标——增删改
      allIcons: [
        {
          src: require("../../static/image/pencil.png")
        },
        {
          src: require("../../static/image/delete.png")
        },
        {
          src: require("../../static/image/add.png")
        }
      ],
        quotaName: null,
        quotaOptions: [],
        
    };
  },
  methods: {
    //弹窗的显示控制
    dialogVisi(index) {
      if (index == 0) {
        this.updateDialogVisible = true;
        return false;
      }
      if (index == 1) {
        this.deleteDialogVisible = true;
        return false;
      }
      if (index == 2) {
        this.resetDialogVisible = true;
        return false;
      }
    },

    deleteInput() {
       let _this = this;
        _this.addName = "",
        _this.addWeight = "",
        _this.addresponse = "",
        _this.addUnit = "",
        _this.addRemark = ""
    },

    deleteInputNew(){
      let _this = this;
      _this.quotaName = null;
      _this.firstName = "",
      _this.firstWeight = "",
      _this.firstResponse = "",
      _this.firstUnit = "",
      _this.firstMark = ""
    },
     
    //点击表格的行，获取相应的数据

    openDetails(row) {
      let _this = this;
      let newRespon = "";
      //责任单位的转换
      _this.allDepart.forEach(function(value, index, array) {
         if (value.id == row.responseible) {
           newRespon = value.name;
         }
          console.log(newRespon)
      });
      _this.returnRow = row;
      (_this.updateName = row.name),
        (_this.updateWeight = row.weight),
        (_this.updateResponse = newRespon),
        (_this.updateUnit = row.unit),
        (_this.updateRemark = row.remark),
        (_this.deleteId = row.id);
        _this.updateRespoId = row.responseible;
    },
 
    //年份切换时出发的查询事件，只需写个调用接口返回数据到数组里即可
    changeValue() {
      // alert("changeValue");
      let vm = this;
      vm.$http({
        method: "get",
        url: "/api/index/getIndex",
        params: {
          type: this.value1,
          year: this.value2
        }
      })
        .then(function(response) {
          if (response.data.code === 0) {
            vm.tableData = response.data.data;
            vm.updateIndexOp(); 
            vm.tableData.forEach(function(value, index, array) {
              array[index].weight = array[index].weight / 10000;
              array[index].sonIndex.forEach(function(value, index, array) {
                array[index].weight = array[index].weight / 10000;
                array[index].sonIndex.forEach(function(value, index, array) {
                  array[index].weight = array[index].weight / 10000;
                });
              });
            });
            console.log(vm.tableData);
          } else {
            console.log("更新失败");
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
      
    // 增加新的指标的方法
    addQuota(returnRow) {
      let _this = this;
      _this.isSure = true;
      let firstTypeFather = returnRow.father;
      console.log(returnRow.cType)
      if (returnRow.cType == 0) {
        console.log("8721496x")
        firstTypeFather = 0;
      }

      console.log(_this.value1)

      _this.$http
        .post("/api/index/addIndex", {
          name: _this.addName,
          weight: _this.addWeight * 10000,
          responseible: _this.addresponse,
          father: firstTypeFather,
          grandFather: returnRow.grandFather,
          type: _this.value1,
          remark: _this.addRemark,
          unit: _this.addUnit
        })
        .then(response => {
          if (response.data.code === 0) {
            _this.resetDialogVisible = false;
            _this.isSure = false;
            _this.changeValue();
            // _this.resetDialogVisible = false;
          
            _this.message(true, response.data.message, "success");
            _this.deleteInput();
          } else {
             _this.isSure = false;
            console.log(response);
            _this.message(true,response.data.message,"error");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    //另一个增加（后来增加的功能）
    addQuotaNew(){
      let _this = this;
      _this.isSure = true;
      console.log(_this.quotaName);
      let fatherNew = "";
      let grandFatherNew = "";
      let typeNew = "";//其实这个字段没必要，后台是判断father的
      let isSecond = false;

       _this.quotaOptions.forEach(function(value, index, array) {//本来想得到总投入和总产出的id值
      //  console.log(array)
      //   console.log(value)
        if (value.id==_this.quotaName) {
          isSecond = true;
          // console.log(isSecond)
        }
       });
      
      if(_this.quotaName == null){//一级指标
        fatherNew = 0;
        grandFatherNew = 0;
        typeNew = 0;
      } else if(isSecond){//二级指标
        fatherNew = _this.quotaName;
        grandFatherNew = 0;
        typeNew = 1;
        console.log(fatherNew)
      } else {//三级指标
       _this.quotaOptions.forEach(function(value, index, array) {
          array[index].sonIndex.forEach(function(value, index, array) {
              if (value.id==_this.quotaName) {
                grandFatherNew=value.father;
              }
            });
       });
        fatherNew = _this.quotaName;
        typeNew = 2;
        console.log(grandFatherNew);
        console.log(fatherNew)
      }

        _this.$http
        .post("/api/index/addIndex", {
          name: _this.firstName,
          weight: _this.firstWeight * 10000,
          responseible: _this.firstResponse,
          father: fatherNew,
          grandFather: grandFatherNew,
          type: _this.value1,
          remark: _this.firstMark,
          unit: _this.firstUnit
        })
        .then(response => {
          if (response.data.code === 0) {
            _this.addFirstDialogVisible = false;//需要改
            _this.isSure = false;
            _this.changeValue();
            // _this.addFirstDialogVisible = false;
            _this.message(true, response.data.message, "success");
            
            _this.deleteInputNew();
          } else {
             _this.isSure = false;
            console.log(response);
            _this.message(true,response.data.message,"error");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    //删除指标方法
    delData() {
      let __this = this;
      var deletepara = {
        id:this.deleteId
      }
      var url =   "/api/index/deleteIndex";
      __this.$axios('post',url,deletepara,function(res){
        __this.changeValue();
        __this.deleteDialogVisible = false;
      })
    },
    
 
    //修改指标
    updateIndex(returnRow) {
      let _this = this;
      _this.$axios('post',"/api/index/updateIndex", {
          z_id: returnRow.id,
          name:_this.updateName,
          weight: _this.updateWeight * 10000,
          form_id: _this.updateRespoId,
          remark: _this.updateRemark,
          unit: _this.updateUnit
        },function(data){
          _this.changeValue();
          _this.updateDialogVisible = false;
        })
    },

     //获取所有的责任单位
    getAllDepartment(){
        let vm = this;
        vm.$http({
          method: "get",
          url: "/api/department/getDepartmentByIdAndName"
        })
          .then(function(response) {
            if (response.data.code == 0) {
              vm.allDepart = response.data.data;
            } else {
              console.log(response.data.msg);
            }
          })
          .catch(function(error) {
            console.log(error);
          });
    },

    //获取初始化数据
    getAllIndexFirst(){
      let vm = this;
       //初始化所有的数据
      vm.$http({
        method: "get",
        url: "/api/index/getIndexYear"
      })
        .then(function(response) {
          if (response.data.code == 0) {
            vm.yearOptions = response.data.data;
          } else {
            console.log(response.data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });

    vm.$http({
      method: "get",
      url: "/api/index/getIndex",
      params: {
        type: 0,
        year: 2019
      }
    })
      .then(function(response) {
         if (response.data.code == 0) {

          vm.tableData = response.data.data;
          //权重需要计算
          vm.tableData.forEach(function(value, index, array) {
            array[index].weight = array[index].weight / 10000;
            array[index].sonIndex.forEach(function(value, index, array) {
              array[index].weight = array[index].weight / 10000;
              array[index].sonIndex.forEach(function(value, index, array) {
                array[index].weight = array[index].weight / 10000;
              });
            });
          });

          vm.loading = false;
          // console.log(wm.quotaName);
          //添加按钮的内部父级指标
          vm.updateIndexOp();
        } else {
          console.log("更新失败");
        }
      })
      .catch(function(error) {
        console.log(error);
      });
    },


    updateIndexOp(){
      let vm = this;
      console.log(vm.tableData)
      console.log(vm.quotaOptions);
      console.log("gbduiiibbbjbjjbnnnnnnnnnnnnnnnnn")
      vm.quotaOptions = vm.tableData;
          for (let index = 0; index < vm.quotaOptions.length; index++) {
            vm.quotaOptions[index].label = vm.quotaOptions[index].name;
             if(vm.quotaOptions[index].sonIndex.length != 0)
                 vm.quotaOptions[index].children = vm.quotaOptions[index].sonIndex;
                for (let indexx = 0; indexx <vm.quotaOptions[index].sonIndex.length; indexx++) {
                  vm.quotaOptions[index].children[indexx].label = vm.quotaOptions[index].children[indexx].name;
                        
            }
          }
    },

  },
  
  mounted: function() {
    let vm = this;
    vm.getAllIndexFirst();
    vm.getAllDepartment();
  }
};
</script>

<style scoped>
.quo-table {
  margin-top: 20px;
}
.demo-table-expand {
  font-size: 0;
  margin-bottom: 20px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
/* .small-icon{
    margin-right: 20px;
  } */
.icon-wrap {
  display: inline-block;
  margin-right: 18px;
  cursor: pointer;
}
.select-box {
  width: 150px;
  margin-left: 2%;
}
.addFirstButton{
  margin-left: 2%;
}
</style>
